<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息列表</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
</head>
<body>
<div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-panel">
                <div style="padding: 30px;">
                    <form class="layui-form layui-form-pane">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">角色</label>
                                <div class="layui-input-inline">
                                    <select id="role">
                                        <option value="">角色</option>
                                        <option value="1">管理员</option>
                                        <option value="2">业务员</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-inline">
                                    <select id="deleted">
                                        <option value="">状态</option>
                                        <option value="1">在职</option>
                                        <option value="2">离职</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" id="searchBtn" type="button">
                                    <i class="layui-icon layui-icon-search"></i>
                                    搜索
                                </button>
                                <button class="layui-btn"  type="reset">
                                    <i class="layui-icon layui-icon-refresh-3"></i>
                                    重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<hr>
<div class="layui-bg-gray" style="padding: 5px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-panel">
                <table id="dataTable" lay-filter="dataTableFilter"></table>
            </div>
        </div>
    </div>
</div>
<div class="layui-btn-group" id="rowBtns" style="display: none">
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="reset">
        <i class="layui-icon layui-icon-refresh"></i>
        重置密码
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>
        离职
    </button>
</div>


<%--给一个表头按钮--%>

<div class="layui-btn-group" id="headrToolbar" style="display: none">
    <input class="layui-btn layui-btn-sm" type="button" lay-event="add" value="添加用户">
    <input class="layui-btn layui-btn-sm layui-btn-danger" type="button" lay-event="dels" value="批量删除">
</div>


<%--添加数据弹层--%>
<div id="layerfom" style="display:none;text-align: center;">
    <form class="layui-form layui-form-pane" style="margin-top: 30px">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="username" type="text" placeholder="请输入用户名" lay-verify="required" lay-verType="tips">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="realname" type="text" placeholder="请输入姓名" lay-verify="required" lay-verType="tips">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="password" type="text" placeholder="请输入密码" lay-verify="required" lay-verType="tips">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                角色
                <input type="radio" name="role" value="2" title="管理员">
                <input type="radio" name="role" value="1" title="业务员" checked>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-inline">
                <input type="button" class="layui-btn" lay-submit lay-filter="addSub" value="提交">
                <input type="reset" class="layui-btn" value="重置">
            </div>
        </div>
    </form>
</div>

</body>
<script>
    layui.use(['table','jquery','layer','form'],function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var cxt = '${pageContext.request.contextPath}';

        console.log("进页面就执行！包括[table.render]")
        //渲染数据表格
        var tabOpt = {
            id:"dataTableId",
            elem:"#dataTable",
            toolbar:"#headrToolbar",
            height:700,
            url:cxt+"/su/page.do",//数据接口地址
            page:true,//开启分页
            limit:4,
            limits:[4,8,12,16,32,64],
            cols:[[
                {field:"id",title:"ID"},
                {field:"username",title:"用户名"},
                {field:"realname",title:"姓名"},
                {field:"role",title:"角色",templet:function (d) {
                        var role = d.role;
                        if (role == 1){
                            return "<b style='color: red'>管理员</b>"
                        }else if (role == 2){
                            return "<b style='color: green'>业务员</b>"
                        }
                    }},
                {field:"deleted",title:"状态",templet:function (d) {
                        var deleted = d.deleted;
                        if (deleted == 1){
                            return "<b style='color: red'>在职</b>"
                        }else if (deleted == 2){
                            return "<b style='color: green'>离职</b>"
                        }
                    }},
                {field:"img",title:"图像",event:"showImg",templet:function () {
                        return "<button class='layui-btn layui-btn-sm'>查看</button>"
                    }},
                {field:"create_time",title:"创建时间"},
                {field:"deleted_time",title:"离职时间"},
                {title:"操作",toolbar:"#rowBtns",minWidth:250,fixed:"right"}
            ]],//列信息
            parseData:function (d) {//数据适配
                if (d.code ==200){
                    return {
                        "code":d.code,
                        "msg":d.msg,
                        "count":d.data.pageCount,
                        "data":d.data.lis
                    }
                }
            },
            response:{
                statusCode: 200 //规定成功的状态码，默认：0
            }
        };
        //渲染数据表格
        var tabIns = table.render(tabOpt);

        /*监听表头工具栏的按钮事件toolbar*/
        table.on("toolbar(dataTableFilter)",function (obj) { //dataTableFilter是table的lay-filter
            var barevent = obj.event; //获取表头事件
            if(barevent == "add"){
                layer.msg("[问题1：toolbar(这里是table的lay-filter)]");
                layer.open({
                    area:[400,420],
                    type:1,
                    title:"添加用户",
                    content:$("#layerfom"),
                    success:function (layero,index) {
                        form.render("radio");
                        add(index);

                    }
                });
            }
        })

        function add(index){
            //layer.msg("开始监听添加表单的提交事件");
            form.on("submit(addSub)",function (fomdata) {
                console.log(fomdata.field);
                $.post(cxt+"/su/addUser.do",fomdata.field,function(rs){
                    console.log(rs);
                    layer.close(index);
                    /*刷新表格*/
                    $("#searchBtn").click();
                });
            })
        }
        /*监听行操作事件*/
        table.on("tool(dataTableFilter)",function (obj) {
            console.log("表格行事件："+obj.data.id); // obj.data存放的是当前行数据
            if("reset" == obj.event){ //重置密码
                resetFun(obj.data);
            }else if("delete" == obj.event){ //删除用户
                delFun(obj.data);
            }else if("showImg" == obj.event){
                showImg(obj.data);
            }
        });

        /*重置密码函数*/
        function resetFun(data){
            layer.confirm("是否要重置密码？",function (index) {
                layer.close(index);
                $.get(cxt+"/su/resetPwd.do",data,function(rs){
                    layer.msg(rs.msg);
                    tabIns.reload();
                })
            })
        }
        /*删除用户函数*/
        function delFun(data){
            layer.confirm("是否删除",data.id,function (index) {
                layer.close(index);
                $.get(cxt+"/su/del.do",data,function (rs) {
                    layer.msg(rs.msg);
                    tabIns.reload();
                })
            })
        }

        /*查看用户图像*/
        function showImg(rowData){
            if(!rowData.img){
                layer.msg("暂时没有设置头像");
                return false;
            }
            var name = rowData.realname;
            var id = rowData.id;
            var img = "http://localhost:8080"+cxt+"/"+rowData.img;
            var photoOpt = {
                photos :{
                    "title": name, //相册标题
                    "id": id, //相册id
                    "start": 0, //初始显示的图片序号，默认0
                    "data": [   //相册包含的图片，数组格式
                        {
                            "alt": name,
                            "pid": id, //图片id
                            "src": img, //原图地址
                            "thumb": img //缩略图地址
                        }
                    ]
                },
                anim:4
            }
            layer.photos(photoOpt);
        }


        //搜索功能
        $("#searchBtn").click(function () {
            var realname = $("#realname").val();
            var role = $("#role").val();
            var deleted = $("#deleted").val();
            tabIns.reload({
                where:{
                    realname:realname,
                    role:role,
                    deleted:deleted
                }
            })
        });
    });
</script>
</html>
